<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-card :bordered="false" class="nowPage">
      <p>基本信2息</p>
      <div style="width:800px">
        <a-form-model
          ref="ruleForm"
          :model="data"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="作业标题" prop="title">
            <a-input v-model="data.title" placeholder="请填写作业标题,四十字以内" />
          </a-form-model-item>
          <a-form-model-item label="作业类型">
            <a-radio-group v-model="data.type">
              <a-radio value="1">班级作业</a-radio>
              <a-radio value="2">公开作业</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="发送班级" prop="school_id">
            <!-- <a-select v-model="data.school_id" placeholder="请选择班级">
              <a-select-option v-for="item in this.Isclass" :key="item.id">{{item.name}}</a-select-option>
            </a-select>-->
          </a-form-model-item>
          <a-form-model-item label="起止时间">
            <a-range-picker @change="onChange" style="width: 100%"></a-range-picker>
          </a-form-model-item>
          <a-form-model-item label="打卡次数">
            <a-input-number
              id="inputNumber"
              :min="1"
              v-model="data.clock_in_num"
              @change="onChange1"
            />
          </a-form-model-item>
          <a-form-model-item label="定时提醒">
            <a-switch v-model="is_remind" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false" style="margin-top:25px">
      <p>作业要求</p>
      <div style="width: 600px;margin-left: 100px;">
        <!-- <a-textarea
          v-model="data.content"
          placeholder="Controlled autosize"
          :autoSize="{ minRows: 3, maxRows: 5 }"
        />-->
      </div>
      <!-- ==================================================================================================== -->

      <div
        style="width: 650px;margin:10px 0 0 100px; display:flex ;"
        v-for="(item,index) in content"
        :key="index"
      >
        <a-textarea
          v-model="item.text"
          :autoSize="{ minRows: 3, maxRows: 5 }"
          v-if="item.hasOwnProperty('text')"
          style="width: 95%;"
        />
        <div
          style="display: inline-block;width: 95%;border:1px solid rgb(225, 225, 225);border-radius: 5px;"
          v-if="item.img"
        >
          <img :src="picPrefixUrl+item.img" style="width: 100%;padding:10px;border:" alt />
        </div>
        <div style="width: 5%;">
          <div @click="del(index)">
            <a-icon type="close" />
          </div>
          <div @click="gotoup(index)" v-if="index != 0 || content.length==2 && index != 0">
            <a-icon type="up" />
          </div>
          <div
            @click="gotodown(index)"
            v-if="index != content.length-1 || content.length==2 && index != 1"
          >
            <a-icon type="down" />
          </div>
        </div>
      </div>
      <div
        style="width: 600px;margin:10px 0 0 100px;border:1px dashed rgb(165, 165, 165);display:flex ;justify-content: space-around;padding:10px"
      >
        <a-button @click="more1">文字</a-button>
        <!-- <a-button @click="more2">音频</a-button> -->
        <!-- <a-button @click="more3">图片</a-button> -->
        <a-upload name="file" :beforeUpload="more3" :showUploadList="false" accept="image/*">
          <!-- accept="image/*, video/*" -->
          <!-- <a-button>上传照片/视频</a-button> -->
          <a-button>图片</a-button>
        </a-upload>

        <!-- <a-button @click="more4">视频</a-button> -->
      </div>

      <!-- ==================================================================================================== -->
      <a-button type="primary" @click="create">发送作业</a-button>
      <a-button @click="back">取消</a-button>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
// import { STable, Ellipsis } from '@/components'
// import StepByStepModal from '../../list/modules/StepByStepModal'
// import CreateForm from '../../list/modules/CreateForm'
import { clockincreate,uploadPic } from '@/api/homeSchool'
import { classList } from '@/api/class'

import topNavBar from '@/components/topNavBar/topNavBar'

export default {
  name: 'Single',
  components: {
    topNavBar
  },
  data() {
    return {
      content: [{ text: '' }],
      nowRouteTitle: '',
      Isclass: [],
      rules: {
        // school_id: [{ required: true, message: '请选择', trigger: 'blur' }],
        title: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },

      is_remind: true,
      data: {
        title: '标题1',
        school_id: 1,
        start_day: '2020-03-29',
        end_day: '2020-03-30',
        clock_in_num: 1, //必填 | 打卡次数
        is_remind: 1, //必填 | 是否定时提醒：true==1是，false==2否
        type: '1', //选择是否公开，必填 | 1班级作业，2公开作业
        content: '内容1',
        save_type: 1, //默认值
        member_arr: [
          {
            class_id: 1,
            student_ids: [1, 2]
          },
          {
            class_id: 2,
            student_ids: [3, 4]
          }
        ]
        // teacher_id: 1
      }
    }
  },
  created() {},
  mounted() {
    this.$store.state.Isfather = false
    this.nowRouteTitle = this.$route.meta.title
    let d = new Date()
    this.data.title = d.getMonth() + 1 + '月' + d.getDate() + '日' + '作业'
    this.data.school_id = this.$store.state.user.school
    return
    classList({ pageSize: 999999 }).then(res => {
      this.Isclass = res.data
    })
  },
  destroyed() {
    this.$store.state.Isfather = true
  },
  methods: {
    onChange1(value) {
      this.clock_in_num = value
    },
    back() {
      this.$router.push({ name: 'afterClassReview' })
    },
    onChange(date, dateString) {
      this.data.start_day = dateString[0]
      this.data.end_day = dateString[1]
    },
    create() {
      this.data.deadline = moment(this.timevalue).unix()
      let content = this.content
      this.data.content = JSON.stringify(content)
      this.is_remind == true ? (this.data.is_remind = 1) : (this.data.is_remind = 2)
      // return
      clockincreate(this.data)
        .then(res => {
          //创建单次作业
          this.$router.push({ name: 'afterClassReview' })
        })
        .catch(err => {
     
          this.$message.error(err.data.message||'修改失败')
        })

      return
      this.$refs.ruleForm.validate(valid => {
        this.data.content = this.content
        return
        if (valid) {

          return

          clockincreate({ parameter }).then(res => {
            //创建单次作业
            // this.Isclass = res.data
          })

          this.visible = false
        } else {
          console.log('error submit!!验证失败')
          return false
        }
      })
    },
    del(e) {
      this.content.splice(e, 1)
    },
    gotoup(e) {
      this.content[e] = this.content.splice(e - 1, 1, this.content[e])[0]
    },
    gotodown(e) {
      // this.content.splice(e, 1, e + 1)

      this.content[e] = this.content.splice(e + 1, 1, this.content[e])[0]
    },

    more1() {
      this.content.push({ text: '' })
      //文
    },
    more2() {
      //音
    },
    // more3() {
    //   //图
    // },
    more4() {
      //视
    },

    more3(file) {
      this.fileParams = file
      let _this = this
      if (_this.fileParams) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        let formData = new FormData()
        formData.append('img', _this.fileParams)
        uploadPic(formData)
          .then(res => {

            this.content.push({ img: res.path })

          })
          .catch(err => {
            _this.$message.error('上传失败')
          })
        // }
      } else {
        _this.$message.error('还没选择任何图片噢!')
        return
      }
      // 转化为blob
      return false
    }
  }
}
</script>
<style lang="less" scoped>
.nowPage {
  padding: 0 8px;
  border-top: 1px solid #d9d9d9;
}
</style>